<script setup lang="ts">
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
} from '@/components/ui/dialog';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';
import { Separator } from '@/components/ui/separator';
import { Switch } from '@/components/ui/switch';
import { useSettings } from '@/composables/use-settings';
import { useConversationsStore } from '@/stores/conversations';
import { ollamaClient } from '@/services/ollama';
import { toast } from 'vue-sonner';
import { Loader2, CheckCircle, XCircle, RefreshCw, Trash2 } from 'lucide-vue-next';
import ThemeToggle from '@/components/theme/theme-toggle.vue';

defineProps<{
  open: boolean;
}>();
const emit = defineEmits<{
  (e: 'update:open', value: boolean): void;
}>();

const { settings, updateSettings } = useSettings();
const { clearConversations } = useConversationsStore();

const localSettings = reactive({ ...settings.value });
const isTestingConnection = ref(false);
const connectionStatus = ref<'idle' | 'success' | 'error'>('idle');
const availableModels = ref<string[]>([]);
const isLoadingModels = ref(false);
const showClearConfirm = ref(false);

// 同步设置
watch(
  () => settings.value,
  newSettings => {
    Object.assign(localSettings, newSettings);
  },
  { deep: true },
);

function onOpenChange(open: boolean) {
  emit('update:open', open);
}

// 测试连接
async function testConnection() {
  isTestingConnection.value = true;
  connectionStatus.value = 'idle';

  try {
    // 临时设置URL进行测试
    ollamaClient.setBaseUrl(localSettings.ollamaUrl);
    const isConnected = await ollamaClient.testConnection();

    if (isConnected) {
      connectionStatus.value = 'success';
      toast.success('连接成功！');
      // 连接成功后加载模型列表
      await loadModels();
    } else {
      connectionStatus.value = 'error';
      toast.error('连接失败，请检查服务器地址');
    }
  } catch (error: unknown) {
    connectionStatus.value = 'error';
    const errorMessage = error instanceof Error ? error.message : '连接失败';
    toast.error(errorMessage);
  } finally {
    isTestingConnection.value = false;
  }
}

// 加载模型列表
async function loadModels() {
  isLoadingModels.value = true;
  try {
    ollamaClient.setBaseUrl(localSettings.ollamaUrl);
    const models = await ollamaClient.getModels();
    availableModels.value = models.models?.map(model => model.name) || [];
  } catch {
    toast.error('加载模型列表失败');
  } finally {
    isLoadingModels.value = false;
  }
}

// 保存设置
function handleSave() {
  updateSettings(localSettings);
  toast.success('设置已保存');
  onOpenChange(false);
}

// 重置设置
function handleReset() {
  const defaultSettings = {
    ollamaUrl: 'http://localhost:11434',
    selectedModel: '',
    temperature: 0.7,
    maxTokens: 2048,
    systemPrompt: '你是一个有用的AI助手。',
    autoSave: true,
    theme: 'system' as const,
  };
  Object.assign(localSettings, defaultSettings);
  toast.info('设置已重置为默认值');
}

// 清除所有对话
async function handleClearAllConversations() {
  clearConversations();
  showClearConfirm.value = false;
  toast.success('所有对话已清除');
}
</script>

<template>
  <Dialog :open="open" @update:open="onOpenChange">
    <DialogContent class="!w-4xl !max-w-4xl max-h-[60vh] flex flex-col p-0">
      <DialogHeader class="px-6 pt-6 pb-4 flex-shrink-0">
        <DialogTitle>设置</DialogTitle>
        <DialogDescription>
          配置 Ollama 服务器连接和模型参数
        </DialogDescription>
      </DialogHeader>

      <!-- 可滚动的内容区域 -->
      <div class="flex-1 overflow-y-auto px-6">
        <div class="space-y-6">
          <!-- Ollama 服务器配置 -->
          <Card>
            <CardHeader>
              <CardTitle class="text-lg">
                Ollama 服务器
              </CardTitle>
              <CardDescription>
                配置本地 Ollama 服务器连接
              </CardDescription>
            </CardHeader>

            <CardContent class="space-y-4">
              <div class="space-y-2">
                <Label for="ollama-url">服务器地址</Label>
                <div class="flex gap-2">
                  <Input
                    id="ollama-url"
                    v-model="localSettings.ollamaUrl"
                    placeholder="http://localhost:11434"
                    class="flex-1"
                  />
                  <Button
                    :disabled="isTestingConnection || !localSettings.ollamaUrl"
                    variant="outline"
                    @click="testConnection"
                  >
                    <Loader2 v-if="isTestingConnection" class="h-4 w-4 animate-spin" />
                    <template v-else>
                      测试连接
                    </template>
                  </Button>
                </div>

                <!-- 连接状态 -->
                <div v-if="connectionStatus !== 'idle'" class="flex items-center gap-2 text-sm">
                  <template v-if="connectionStatus === 'success'">
                    <CheckCircle class="h-4 w-4 text-green-500" />
                    <span class="text-green-600">连接成功</span>
                  </template>
                  <template v-else>
                    <XCircle class="h-4 w-4 text-red-500" />
                    <span class="text-red-600">连接失败</span>
                  </template>
                </div>
              </div>
            </CardContent>
          </Card>

          <!-- 模型配置 -->
          <Card>
            <CardHeader>
              <CardTitle class="text-lg">
                模型配置
              </CardTitle>
              <CardDescription>
                选择和配置 AI 模型参数
              </CardDescription>
            </CardHeader>
            <CardContent class="space-y-4">
              <div class="space-y-2">
                <div class="flex items-center justify-between">
                  <Label for="model-select">选择模型</Label>
                  <Button
                    :disabled="isLoadingModels || !localSettings.ollamaUrl"
                    variant="ghost"
                    size="sm"
                    @click="loadModels"
                  >
                    <Loader2 v-if="isLoadingModels" class="h-4 w-4 animate-spin" />
                    <RefreshCw v-else class="h-4 w-4" />
                  </Button>
                </div>

                <Select v-model="localSettings.selectedModel">
                  <SelectTrigger>
                    <SelectValue placeholder="请选择模型" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem v-if="availableModels.length === 0" value="no-models" disabled>
                      {{ isLoadingModels ? '加载中...' : '无可用模型' }}
                    </SelectItem>
                    <SelectItem
                      v-for="model of availableModels"
                      v-else
                      :key="model"
                      :value="model"
                    >
                      {{ model }}
                      <Badge v-if="model.includes('deepseek-r1')" variant="secondary" class="ml-2">
                        推荐
                      </Badge>
                    </SelectItem>
                  </SelectContent>
                </Select>
              </div>

              <div class="grid grid-cols-2 gap-4">
                <div class="space-y-2">
                  <Label for="temperature">温度 ({{ localSettings.temperature }})</Label>
                  <input
                    id="temperature"
                    v-model.number="localSettings.temperature"
                    type="range"
                    min="0"
                    max="2"
                    step="0.1"
                    class="w-full"
                  />
                  <p class="text-xs text-muted-foreground">
                    控制回复的随机性，值越高越随机
                  </p>
                </div>

                <div class="space-y-2">
                  <Label for="max-tokens">最大令牌数</Label>
                  <Input
                    id="max-tokens"
                    v-model.number="localSettings.maxTokens"
                    type="number"
                    min="1"
                    max="8192"
                  />
                  <p class="text-xs text-muted-foreground">
                    限制回复的最大长度
                  </p>
                </div>
              </div>

              <div class="space-y-2">
                <Label for="system-prompt">系统提示词</Label>

                <textarea
                  id="system-prompt"
                  v-model="localSettings.systemPrompt"
                  class="w-full min-h-[80px] px-3 py-2 border border-input bg-background text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 resize-none rounded-md"
                  placeholder="输入系统提示词..."
                />
                <p class="text-xs text-muted-foreground">
                  定义 AI 助手的角色和行为
                </p>
              </div>
            </CardContent>
          </Card>

          <!-- 应用设置 -->
          <Card>
            <CardHeader>
              <CardTitle class="text-lg">
                应用设置
              </CardTitle>
              <CardDescription>
                个性化应用体验
              </CardDescription>
            </CardHeader>
            <CardContent class="space-y-4">
              <div class="flex items-center justify-between">
                <div class="space-y-0.5">
                  <Label>自动保存对话</Label>
                  <p class="text-sm text-muted-foreground">
                    自动保存对话历史到本地存储
                  </p>
                </div>
                <Switch v-model="localSettings.autoSave" />
              </div>

              <Separator />

              <div class="flex items-center justify-between">
                <div class="space-y-0.5">
                  <Label>主题设置</Label>
                  <p class="text-sm text-muted-foreground">
                    选择应用主题外观
                  </p>
                </div>
                <ThemeToggle />
              </div>

              <Separator />

              <div class="flex items-center justify-between">
                <div class="space-y-0.5">
                  <Label>清除数据</Label>
                  <p class="text-sm text-muted-foreground">
                    删除所有对话记录，此操作不可撤销
                  </p>
                </div>
                <Button
                  variant="destructive"
                  size="sm"
                  @click="showClearConfirm = true"
                >
                  <Trash2 class="h-4 w-4 mr-2" />
                  清除所有对话
                </Button>
              </div>
            </CardContent>
          </Card>
        </div>
      </div>

      <!-- 固定在底部的按钮区域 -->
      <div class="flex justify-between px-6 pb-6 pt-4 flex-shrink-0 border-t bg-background">
        <Button variant="outline" @click="handleReset">
          重置默认
        </Button>
        <div class="flex gap-2">
          <Button variant="outline" @click="onOpenChange(false)">
            取消
          </Button>
          <Button @click="handleSave">
            保存设置
          </Button>
        </div>
      </div>
    </DialogContent>

    <!-- 清除确认对话框 -->
    <Dialog :open="showClearConfirm" @update:open="(value) => showClearConfirm = value">
      <DialogContent class="max-w-md">
        <DialogHeader>
          <DialogTitle>确认清除</DialogTitle>
          <DialogDescription>
            你确定要清除所有对话记录吗？此操作不可撤销，所有聊天历史将被永久删除。
          </DialogDescription>
        </DialogHeader>
        <div class="flex justify-end gap-2 pt-4">
          <Button variant="outline" @click="showClearConfirm = false">
            取消
          </Button>
          <Button variant="destructive" @click="handleClearAllConversations">
            <Trash2 class="h-4 w-4 mr-2" />
            确认清除
          </Button>
        </div>
      </DialogContent>
    </Dialog>
  </Dialog>
</template>
